<template>
  <div class="gantt">
    <div class="gantt-top" v-if="data_list.length>0">
      <ul>
        <li :class="gantt_date==3?'active':''" @click="get_project_gantt(3)">月</li>
        <li :class="gantt_date==2?'active':''" @click="get_project_gantt(2)">周</li>
        <li :class="gantt_date==1?'active':''" @click="get_project_gantt(1)">天</li>
      </ul>
    </div>
    <div class="content" v-if="data_list.length>0">
      <div class="gantt-html" ref="gantt"></div>
    </div>
    <loading v-if="is_show_loading"></loading>
    <div class="defaultPage-smart" v-if="data_list.length==0">
      <div class="box">
        <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
  import loading from '@/components/loading'
  import gantt from 'dhtmlx-gantt'  // 引入模块
  export default {
    name: "Gantt",
    components: {
      loading,
    },
    data() {
      return {
        is_show_loading: true,
        gantt_date: 1,
        data_list: [
          {text: '简称', id: 1, start_date: '2019-10-26', end_date: '2019-10-28', progress: 0.2},
          {text: '简称', id: 2, start_date: '2019-10-26', end_date: '2019-10-28', progress: 0.2}
        ],
        tasks: {
          data: [],
        }
      }
    },
    mounted() {
      this.get_project_data();
    },
    methods: {
      get_project_gantt(datetype) {
        if (gantt._getHorizontalScrollbar != undefined) {
          gantt.clearAll(); //方法就清空数据了
        }
        let _this = this;
        //添加今天的标记
        var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
        var today = new Date();
        gantt.addMarker({
          start_date: today,
          css: "today",
          text: "今天",
          title: "今天: " + date_to_str(today)
        });
        _this.tasks.data = _this.data_list;
        // gantt.config.details_on_create = false;//点击 + 号添加列时，弹出lightbox弹出框
        // gantt.config.details_on_dblclick = false;//双击task时，弹出lightbox弹出框
        gantt.config.drag_lightbox = false;//允许鼠标通过按住的lightbox头部拖拽的方式，调整lightbox的位置
        gantt.config.drag_links = false;//允许通过拖拽的方式新增任务依赖的线条
        gantt.config.drag_move = false;//允许用户拖动条形图来改变位置
        gantt.config.drag_progress = false;//允许用户推拽条形图上用来调整进度百分比的小按钮
        gantt.config.drag_resize = false;//允许用户通过拖拽任务的条形图的两端来改变工期
        gantt.config.fit_tasks = false;//当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
        gantt.config.grid_width = 440;//设置左侧表格的宽度
        gantt.config.readonly = true;//只读模式的甘特图
        if (datetype == 1) {
          _this.gantt_date = 1;
          //天
          gantt.config.scale_unit = "month";
          gantt.config.date_scale = "%F, %Y";

          gantt.config.scale_height = 50;
          gantt.config.subscales = [
            {unit: "day", step: 1, date: "%j"}
          ];
          gantt.config.min_column_width = 20;
        } else if (datetype == 2) {
          _this.gantt_date = 2;
          //周
          var weekScaleTemplate = function (date) {
            var dateToStr = gantt.date.date_to_str("%d %M");
            var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
            return dateToStr(date) + " - " + dateToStr(endDate);
          };

          gantt.config.scale_unit = "week";
          gantt.config.step = 1;
          gantt.templates.date_scale = weekScaleTemplate;
          gantt.config.subscales = [
            {unit: "day", step: 1, date: "%D"}
          ];
          gantt.config.min_column_width = 20;
          gantt.config.scale_height = 50;
        } else {
          _this.gantt_date = 3;
          //月

          gantt.config.scale_unit = "year";

          gantt.config.min_column_width = 50;
          gantt.config.scale_height = 50;
          gantt.templates.date_scale = "%Y";
          gantt.config.date_scale = "%Y";
          gantt.config.subscales = [
            {unit: "month", step: 1, date: "%F"}
          ];
        }
        gantt.config.select_task = true;//任务可以点击选中
        gantt.config.show_chart = true;//是否显示时间轴
        gantt.config.show_grid = true;//是否显示左侧表格
        gantt.config.show_task_cells = false;//时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
        gantt.config.start_on_monday = false; // 第一天将变为周日
        gantt.config.task_attribute = "t_id";//任务ID要放在dom节点的哪个属性
        var colContent = function (task) {
          // return (`<a href="https://www.smartptm.com/pc/index.html#/gantt?id=${task.id}">查看</a>`);
          // https://www.smartptm.com/pc/index.html#/gantt?id=${task.id}
          // http://121.196.244.140//pc/index.html#/gantt?id=${task.id}
          // return (`<router-link :to="'/transfer'"> 查看</router-link>`);
          return (``);
        };
        gantt.config.columns = [
          {name: "text", tree: true, width: '*', resize: true},
          {name: "start_date", align: "center", resize: true},
          {name: "duration", align: "center"},
          {name: "buttons", width: 75, template: colContent}
        ];
        //取消右边的名称显示
        gantt.templates.task_text = function (start, end, task) {
          return "";
        };
        gantt.init(_this.$refs.gantt);
        gantt.parse(_this.tasks);

        function clickGridButton(id) {
          console.log(id);
        }
      },
      get_project_data() {
        this.$http.get('project/project/select/getProjectList', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            let list = res.data || [];
            // {text: '简称', id: 1, start_date: '2019-10-26', end_date: '2019-10-28', progress: 0.2},
            list.map(function (item) {
              item.text = item.shortName;
              item.start_date = item.startTime;
              item.end_date = item.endTime;
            });
            this.data_list = list;
            console.log(this.data_list);
            this.get_project_gantt();
            setTimeout(() => {
              this.is_show_loading = false;
            }, 1000)
          } else {
            this.$message.error(res.statusMsg)
          }
        });
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .gantt {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 6px;


    .gantt-top {
      height: 80px;
      padding-top: 24px;
      box-sizing: border-box;
      text-align: right;

      > ul {
        display: flex;
        padding-right: 24px;
        flex-direction: row-reverse;

        > li {
          width: 64px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #F2F6F9;
          border-radius: 6px;
          margin-right: 16px;
          color: #96A2AA;
          font-size: 14px;
          cursor: pointer;
        }

        > .active {
          background-color: #0755DB;
          color: #ffffff;
        }
      }
    }

    .content {
      height: calc(100% - 80px);
      padding: 24px;
      box-sizing: border-box;

      .gantt-html {
        width: 100%;
        height: 100%;

        .gantt_layout_cell_border_bottom {
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .gantt-html {
    .gantt_layout_cell_border_bottom, .gantt_grid_scale, .gantt_scale_line, .gantt_task_scale, .gantt_layout_cell_border_right, .gantt_task .gantt_task_scale .gantt_scale_cell {
      border-color: #EEEEEE !important;
    }

    .gantt_task_line {
      background-color: #0755DB;
      border: 1px solid #0755DB !important;
    }

    .gantt_task_progress {
      background-color: #0755DB;

    }

    .gantt_task_line.gantt_selected {
      box-shadow: 0 0 5px #0755DB;
    }

    .gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover {
      background-color: #EEEEEE;
    }

    .gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected, .gantt_task_row.gantt_selected {
      background-color: #EEEEEE;
    }

    .gantt_marker {
      background-color: #FF8F2B;
    }
  }
</style>

